<template>
  <div class="supplier-return-check" id="supplierReturnCheck">
    <createTop firstMenu="配料采购" secondMenu="采购退货" title="详情"></createTop>
        
    <el-button
    size="small"
    plain
    type="info"
    class="daochu-btn"
    @click="$getPdf('#supplierReturnCheck','配料退货')">导出PDF</el-button>


    <el-card class="one">

      <div class="check-title">
        <div class="status" :class="status==='已退货'?'zuofei-color':''">{{status}}</div>
        <div class="a">
          <div class="top">
            <div class="i"><span>采购退货单号: </span>{{iRes.order}}</div>
            <div class="i"><span>经办人: </span>{{iRes.do_name}}</div>
            <div class="i"><span>退货日期: </span>{{iRes.date}}</div>
            <div class="i"><span>制单人: </span>{{iRes.make_username}}</div>
          </div>
          <div class="top">
            <div class="i"><span>关联采购单号: </span>{{iRes.cgOrder}}</div>
          </div>
        </div>
      </div>
        <el-table
        :data="tableData"
        style="width: 100%"
        :border="true"
        :fit="true"
        :stripe="true"
        show-summary
        size="mini"
        align="center">

        <el-table-column
          prop="materials_number"
          label="配料编号"
          min-width="180"
          align="center">
        </el-table-column>

        <el-table-column
          prop="materials_name"
          label="配料名称"
          min-width="180"
          align="center">
        </el-table-column>

        <el-table-column
          prop="formats_name"
          label="规格/型号"
          min-width="180"
          align="center">
        </el-table-column>

        <el-table-column
          prop="materials_unit"
          label="单位"
          min-width="120"
          align="center">
        </el-table-column>

        <el-table-column
          prop="suppliers_nickname"
          label="供应商"
          min-width="120"
          align="center">
        </el-table-column>

        <el-table-column
          prop="return_count"
          label="退货数"
          min-width="120"
          align="center">
        </el-table-column>

        <el-table-column
          prop="return_price"
          label="退货单价"
          min-width="120"
          align="center">
        </el-table-column>

        <el-table-column
          prop="xiaoji_price"
          label="小计"
          min-width="120"
          align="center">
        </el-table-column>

      </el-table>
      <div class="allPrice">
        合计 :<span class="red-word">  {{shouldPrice.toFixed(3)}}</span>
      </div>

      <div class="allPrice" v-if="iRes.should_return_price">
        协商退款金额 :<span class="red-word"> {{iRes.should_return_price}}</span>
      </div>

      <div class="allPrice" v-else>
        应退款金额 :<span class="red-word"> {{iRes.all_price}}</span>
      </div>
    </el-card>

    <el-card>
      <div class="bottom">
        <div class="remark"><span>备注:</span>{{iRes.remarks}}</div>
        <div class="remark"><span>制单人:</span>{{iRes.make_username}}</div>
      </div>
    </el-card>

    <el-card v-if="iRes.void_reason" :style="{'marginTop':'15px'}">
         <span :style="{'marginRight':'0','fontWeight':'600'}">作废原因：</span><span>{{iRes.void_reason}}</span> 
    </el-card>

    <el-dialog class="zuofei-dia" v-if="zuofei" title="提示" width='500px' center :visible="true" @close="delClose">
      <div :style="{'textAlign':'center'}">确定将已出货订单{{iRes.order}}作废吗?作废后不可回建。</div>
      <div :style="{'textAlign':'center','color':'red'}">如有关联的出库单将一并作废,相应的库存将退回原有仓库。</div>
      <div :style="{'textAlign':'center'}">如确认,请填写作废原因。</div>
      <el-input :style="{'width':'350px','margin-left':'45px'}" v-model="zuofeiReson" type="textarea" :rows="5" resize="none" placeholder="输入作废原因"></el-input>
        <span slot="footer" class="dialog-footer">
          <el-button @click="delClose">取 消</el-button>
          <el-button type="primary" @click="delConfirm">确 定</el-button>
        </span>
    </el-dialog>

    <el-button
    size="small"
    plain
    type="danger"
    class="zuofei-btn2"
    v-if="status!=='已作废'"
    @click="zuofeiClick">作废</el-button>

  </div>
</template>
<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import createTop from '@/components/createTop.vue';
import saveBtn from '@/components/saveBtn.vue';
import ajaxResquest from '@/api/apiRequest';
import { Watch } from 'vue-property-decorator';
import tableList from '@/tables/produceInCheckTable.vue';
import AjaxResquest from '@/api/apiRequest';

@Component({
  components: {
    createTop,
    tableList
  }
})
export default class OrderStatusCheck extends Vue {
  listRes!: AjaxResquest;
  confirmRes!: AjaxResquest;
  zuofeiRes!: AjaxResquest;

  tableData: any[] = [];
  iRes = {};
  status: string = '';
  customerInfo: any = {};
  id!: string;

  zuofei: boolean = false;
  zuofeiReson: string = '';
  shouldPrice: number = 0;
  // 商品分类
  mounted() {
    // TODO
    console.log(this.$route.query);
    this.status = this.$route.query.status;
    this.id = this.$route.query.id;
    this.listRes = new AjaxResquest('/purchase/returnInfo');
    this.confirmRes = new AjaxResquest('/order/orderVerifyToDo');
    this.zuofeiRes = new AjaxResquest('/purchase/returnOrderToVoid');
    this.getList();
  }
  getList(): void {
    this.listRes
      .getFunction({ returnInfoId: this.$route.query.id })
      .then((res:any) => {
        if (res.data.code === 1) {
          let temp = res.data.data.types.list;
          temp.map((i: any) => {
            this.shouldPrice +=
              parseFloat(i.return_count) * parseFloat(i.return_price);
          });
          console.log(temp);

          this.tableData = temp;
          this.iRes = res.data.data.types.info;
          // this.customerInfo = res.data.data.types.customersInfo;
          // this.totalCount = res.data.data.allCount;
        }
      });
  }
  confirm() {
    this.confirmRes
      .getFunction({ orderInfoId: this.$route.query.id })
      .then((res: any) => {
        if (res.data.code === 1) {
          this.$to('order');
        }
      });
  }
  zuofeiClick() {
    this.zuofei = true;
  }
  delClose() {
    this.zuofei = false;
  }
  delConfirm() {
    let data = {
      returnInfoId: this.id,
      reason: this.zuofeiReson
    };
    this.zuofeiRes.getFunction(data).then((res: any) => {
      if (res.data.code === 1) {
        console.log(res.data.data);
        this.$to('supplierReturn');
      }
    });
  }
}
</script>
<style lang="less">
.supplier-return-check {
  position: relative;
  height: 100%;
  padding: 15px;
  // display: flex;
  flex-direction: column;
  // z-index: 101;
  box-sizing: border-box;
  text-align: left;
  .el-card {
    overflow-y: auto;
  }
  .status {
    font-size: 24px;
    color: #66cccc;
  }
  .check-title {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: top;
    margin-bottom: 15px;
  }
  .el-checkbox {
    margin: 2px 10px !important;
    // width: 130px;
  }
  .radio {
    margin-top: 10px;
  }
  .top {
    display: flex;
    padding-left: 40px;
    margin-bottom: 10px;
    div {
      min-width: 140px;
      margin-right: 20px;
    }
    span {
      font-weight: 600;
    }
  }
  .bottom {
    padding-left: 20px;
    margin-top: 15px;
    div {
      min-width: 140px;
      margin-right: 20px;
      margin-bottom: 20px;
    }
    span {
      display: inline-block;
      margin-right: 15px;
      font-weight: 600;
    }
    .date {
      font-weight: 500;
      font-size: 14px;
      color: #777;
    }
  }
  .one {
    position: relative;
    margin-bottom: 15px;
  }
  .xiadan {
    position: absolute;
    right: 35px;
    top: 15px;
  }
  .big-word {
    font-weight: 600;
  }
  .otherPrice {
    margin-top: 10px;
    width: 100%;
    justify-content: flex-end;
    display: flex;
    align-items: center;
    font-size: 14px;
  }
  .allPrice {
    margin-top: 10px;
    width: 100%;
    justify-content: flex-end;
    display: flex;
    align-items: center;
    font-size: 16px;
    .red-word {
      color: red;
    }
  }
  .xiadan-btn {
    margin-top: 15px;
  }
  .zuofei-btn {
    position: absolute;
    right: 90px;
    top: 15px;
  }
  .daochu-btn {
    position: absolute;
    right: 90px;
    top: 15px;
  }
  .zuofei-btn2 {
    position: absolute;
    right: 180px;
    top: 15px;
  }
  .zuofei-color {
    color: #cc0000;
  }
  .a {
    color: #000;
  }
}
</style>
